<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>景区列表</title>
  <!--引入的vue.js-->
  <script src="/js/vue.js"></script>
  <!--引入elementUI的css-->
  <link  type="text/css" rel="stylesheet" href="/css/index.css">
  <!--引入elementUI的js-->
  <script src="/js/index.js"></script>
  <!--引入axios.js-->
  <script src="/js/axios.min.js"></script>

  <style>

    /* 原有样式保持不变 */
    .scenic-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    .scenic-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    .scenic-card {
      border: 1px solid #ebeef5;
      border-radius: 8px;
      overflow: hidden;
      transition: box-shadow 0.3s;
      cursor: pointer;
    }
    .scenic-card:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .scenic-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .scenic-header {
      display: flex;
      gap: 20px; /* 控制图片和内容之间的距离 */
      align-items: flex-start;
      margin-bottom: 20px;
    }

    .scenic-header .scenic-image {
      max-width: 400px;
      flex-shrink: 0;
    }

    .scenic-basic-info {
      flex: 1;
      max-width: 500px;
    }

    /* 清除浮动 */
    .scenic-container::after {
      content: "";
      display: table;
      clear: both;
    }
    .scenic-info {
      padding: 15px;
    }
    .scenic-name {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }
    .scenic-level {
      color: #ff9900;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .info-item {
      margin-bottom: 8px;
      display: flex;
      font-size: 14px;
    }
    .info-label {
      width: 70px;
      color: #888;
    }
    .info-content {
      flex: 1;
      color: #666;
    }
    .section-title {
      font-size: 18px;
      font-weight: bold;
      margin: 25px 0 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    .ticket-table {
      margin-top: 20px;
    }
    .back-button {
      margin-bottom: 20px;
    }
    .scenic-description {
      line-height: 1.8;
      text-align: justify;
    }
    .detail-container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .detail-content {
      flex: 1;
      overflow-y: auto;
    }
    /* 基础样式设置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', Arial, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      color: #333;
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }

    .btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn:hover {
      background-color: #45a049;
    }

    .section-title {
      text-align: center;
      margin-bottom: 30px;
      font-size: 28px;
      color: #2c3e50;
      position: relative;
      padding-bottom: 15px;
    }

    .section-title:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background-color: #4CAF50;
    }

    /* 头部样式 */
    header {
      background-color: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
      color: #4CAF50;
    }

    .logo span {
      color: #2c3e50;
    }

    nav ul {
      display: flex;
    }

    nav ul li {
      margin-left: 20px;
    }

    nav ul li a {
      padding: 5px 10px;
      transition: color 0.3s;
    }

    nav ul li a:hover {
      color: #4CAF50;
    }

    .auth-buttons {
      display: flex;
      gap: 10px;
    }

    .auth-buttons .btn {
      padding: 8px 15px;
    }

    .btn-login {
      background-color: transparent;
      color: #4CAF50;
      border: 1px solid #4CAF50;
    }

    .btn-login:hover {
      background-color: #4CAF50;
      color: white;
    }

    /* 分类查询样式 - 顶部布局 */
    .filter-section {
      background-color: white;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      margin-bottom: 25px;
    }

    .filter-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 12px;
      display: flex;
      align-items: center;
    }

    .filter-title i {
      margin-right: 10px;
      color: #4CAF50;
    }

    .filter-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
    }

    .filter-group {
      display: flex;
      align-items: center;
      margin-right: 25px;
    }

    .filter-label {
      margin-right: 12px;
      font-weight: bold;
      color: #555;
      min-width: 80px;
      white-space: nowrap;
    }

    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .filter-option {
      padding: 8px 16px;
      border: 1px solid #ddd;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s;
      white-space: nowrap;
    }

    .filter-option:hover {
      border-color: #4CAF50;
      color: #4CAF50;
      transform: translateY(-2px);
    }

    .filter-option.active {
      background-color: #4CAF50;
      color: white;
      border-color: #4CAF50;
      box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

    .filter-reset {
      margin-left: auto;
    }

    .filter-reset-btn {
      color: #888;
      cursor: pointer;
      padding: 8px 16px;
      border: 1px solid #ddd;
      border-radius: 20px;
      transition: all 0.3s;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    .filter-reset-btn i {
      margin-right: 5px;
    }

    .filter-reset-btn:hover {
      color: #4CAF50;
      border-color: #4CAF50;
      background-color: rgba(76, 175, 80, 0.1);
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .main-layout {
        flex-direction: column;
      }

      .filter-section {
        width: 100%;
        position: static;
      }
    }

    @media (max-width: 768px) {
      .scenic-grid {
        grid-template-columns: 1fr;
      }
    }
    /* 页脚样式 */
    html, body {
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    main {
      flex: 1 0 auto;
    }

    footer {
      background-color: #2c3e50;
      color: white;
      padding: 60px 0 20px;
      flex-shrink: 0;
    }

    .footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
    }

    .footer-column h3 {
      margin-bottom: 20px;
      font-size: 18px;
    }

    .footer-column ul li {
      margin-bottom: 10px;
    }

    .footer-column ul li a:hover {
      color: #4CAF50;
    }

    .social-icons {
      display: flex;
      gap: 15px;
      margin-top: 15px;
    }

    .social-icons a {
      display: inline-block;
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      transition: background-color 0.3s;
    }

    .social-icons a:hover {
      background-color: #4CAF50;
    }

    .copyright {
      text-align: center;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 14px;
    }
  </style>
</head>
<body>
<main>
<!-- 头部导航 -->
<header>
  <div class="container header-container">
    <div class="logo">
      <a href="index.html">探索<span>世界</span></a>
    </div>
    <nav>
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="scenic.html" style="color: #4CAF50;">景区</a></li>
        <li><a href="dot.html">景点</a></li>
        <li><a href="order.html">订单</a></li>
        <li><a href="guide.html">攻略</a></li>
        <li><a href="notes.html" >游记</a></li>
      </ul>
    </nav>
    <div class="auth-buttons" id="authButtons">
      <!-- 登录状态由JavaScript动态生成 -->
    </div>
  </div>
</header>

<div class="container main-content">
  <h1 class="page-title">探索美丽景区</h1>

  <div id="app">
    <transition name="fade" mode="out-in">
      <div v-if="!showDetail">
        <!-- 分类查询区域 - 顶部布局 -->
        <div class="filter-section">
          <div class="filter-title">
            <i class="el-icon-filter"></i>分类查询
          </div>

          <div class="filter-container">
            <!-- 景区级别筛选 -->
            <div class="filter-group">
              <div class="filter-label">景区级别：</div>
              <div class="filter-options">
                <div
                        class="filter-option"
                        :class="{ active: filter.level === 'AAAAA' }"
                        @click="toggleFilter('level', 'AAAAA')"
                >AAAAA</div>
                <div
                        class="filter-option"
                        :class="{ active: filter.level === 'AAAA' }"
                        @click="toggleFilter('level', 'AAAA')"
                >AAAA</div>
                <div
                        class="filter-option"
                        :class="{ active: filter.level === 'AAA' }"
                        @click="toggleFilter('level', 'AAA')"
                >AAA</div>
              </div>
            </div>

            <!-- 景区类型筛选 -->
            <div class="filter-group">
              <div class="filter-label">景区类型：</div>
              <div class="filter-options">
                <div
                        class="filter-option"
                        :class="{ active: filter.themecode === '自然风景' }"
                        @click="toggleFilter('themecode', '自然风景')"
                >自然风景</div>
                <div
                        class="filter-option"
                        :class="{ active: filter.themecode === '人文历史' }"
                        @click="toggleFilter('themecode', '人文历史')"
                >人文历史</div>
                <div
                        class="filter-option"
                        :class="{ active: filter.themecode === '主题公园' }"
                        @click="toggleFilter('themecode', '主题公园')"
                >主题公园</div>
                <div
                        class="filter-option"
                        :class="{ active: filter.themecode === '红色旅游' }"
                        @click="toggleFilter('themecode', '红色旅游')"
                >红色旅游</div>
                <div
                        class="filter-option"
                        :class="{ active: filter.themecode === '乡村旅游' }"
                        @click="toggleFilter('themecode', '乡村旅游')"
                >乡村旅游</div>
              </div>
            </div>

            <div class="filter-reset">
              <span class="filter-reset-btn" @click="resetFilter">
                <i class="el-icon-refresh"></i>重置筛选
              </span>
            </div>
          </div>
        </div>

        <!-- 景区列表区域 -->
        <div class="scenic-list-section">
          <div class="list-header">
            <div class="list-title">景区列表</div>
            <div class="result-count">共找到 {{filteredScenics.length}} 个景区</div>
          </div>

          <div class="scenic-grid">
            <div
                    class="scenic-card"
                    v-for="scenic in filteredScenics"
                    :key="scenic.scenicId"
                    @click="viewDetail(scenic.scenicId)"
            >
              <img :src="scenic.scover || '/images/default-image.jpg'" :alt="scenic.scenicName" class="scenic-image">
              <div class="scenic-info">
                <div class="scenic-name">{{ scenic.scenicName }}</div>
                <div class="scenic-level">
                  <el-rate
                          v-model="scenic.level"
                          disabled
                          :max="5"
                          :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                          text-color="#ff9900">
                  </el-rate>
                  <span style="margin-left: 10px;">{{ scenic.jbcode }}景区</span>
                </div>
                <div class="info-item">
                  <span class="info-label">地址：</span>
                  <span class="info-content">{{ scenic.saddress }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">电话：</span>
                  <span class="info-content">{{ scenic.phone }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 无数据提示 -->
          <div v-if="filteredScenics.length === 0" class="empty-state">
            <i class="el-icon-search"></i>
            <p>暂无符合条件的景区，请尝试其他筛选条件</p>
          </div>
        </div>
      </div>

      <!-- 详情页 -->
      <div v-else class="detail-container">
        <el-button class="back-button" icon="el-icon-arrow-left" @click="goBack">返回列表</el-button>

        <!-- 景区基本信息 -->
        <div class="scenic-header" v-if="currentScenic">
          <img :src="currentScenic.scover || '/images/default-image.jpg'" :alt="currentScenic.scenicName" class="scenic-image" style="max-width: 400px;">
          <div class="scenic-basic-info">
            <h1 class="scenic-name">{{ currentScenic.scenicName }}</h1>
            <div class="scenic-level">
              <el-rate
                      v-model="currentScenic.level"
                      disabled
                      :max="5"
                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                      text-color="#ff9900">
              </el-rate>
              <span style="margin-left: 10px;">{{ currentScenic.jbcode }}景区</span>
            </div>
            <div class="info-item">
              <span class="info-label">地址：</span>
              <span class="info-content">{{ currentScenic.saddress }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">开放时间：</span>
              <span class="info-content">{{ currentScenic.yytime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">联系电话：</span>
              <span class="info-content">{{ currentScenic.phone }}</span>
            </div>
          </div>
        </div>

        <!-- 景区详细介绍 -->
        <div class="section-title">景区介绍</div>
        <div class="scenic-description" v-if="currentScenic">
          {{ currentScenic.sintroduction }}
        </div>
        <!-- 景点信息（新增） -->
        <el-card shadow="always" style="margin-bottom: 20px;">
          <div class="section-title">景点信息</div>

          <el-table
                  v-loading="loadingDots"
                  :data="dots"
                  size="medium"
                  border
                  stripe
                  empty-text="暂无景点信息">
            <el-table-column prop="dotName" label="景点名称" min-width="200">
              <template slot-scope="scope">
        <span style="color:#409EFF; cursor:pointer;" @click="viewDotDetail(scope.row.dotId)">
          {{ scope.row.dotName }}
        </span>
              </template>
            </el-table-column>

            <el-table-column prop="type" label="景点类型" width="120" align="center">
              <template slot-scope="scope">
                <el-tag size="small" :type="getDotTypeTag(scope.row.type)">{{ scope.row.type }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="location" label="位置" min-width="180">
              <template slot-scope="scope">
                {{ scope.row.location || scope.row.dotAddress || '未知' }}
              </template>
            </el-table-column>

            <el-table-column prop="openTime" label="开放时间" width="140" align="center">
              <template slot-scope="scope">
                {{ scope.row.openTime || '详情请查看' }}
              </template>
            </el-table-column>

            <el-table-column prop="suggestedDuration" label="建议游玩" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.suggestedDuration || '1-2小时' }}
              </template>
            </el-table-column>

            <el-table-column label="操作" width="120" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="viewDotDetail(scope.row.dotId)">
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-empty v-if="!loadingDots && (!dots || dots.length === 0)"
                    description="暂无景点信息"
                    :image-size="100"
                    style="margin: 18px 0;"></el-empty>
        </el-card>
        <!-- 门票信息（统一Element表格风格） -->
        <el-card shadow="always">
          <div class="section-title">门票信息</div>

          <el-table
                  v-loading="loadingTickets"
                  :data="tickets"
                  size="medium"
                  border
                  stripe>
            <el-table-column prop="ticketName" label="门票类型" min-width="320">
              <template slot-scope="scope">
                <span style="color:#409EFF; cursor:default;">{{ scope.row.ticketName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="门市价" width="140" align="center">
              <template slot-scope="scope">
                <span class="oprice">￥{{ fmtMoney(scope.row.ticketOprice) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="探探价" width="140" align="center">
              <template slot-scope="scope">
                <span class="dprice">￥{{ fmtMoney(scope.row.ticketDprice) }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="ticketPtype" label="付款方式" width="160" align="center">
              <template slot-scope="scope">
                <el-tag size="small" type="info">{{ mapPayType(scope.row.ticketPtype) }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="160" fixed="right" align="center">
              <template slot-scope="scope">
                <div class="op-cell">
                  <el-button type="warning" size="mini"
                             @click="goBooking(currentScenic.scenicId, scope.row.ticketId)">
                    门票预订
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-empty v-if="!loadingTickets && (!tickets || tickets.length === 0)"
                    description="暂无门票信息"
                    :image-size="100"
                    style="margin: 18px 0;"></el-empty>
        </el-card>
        </template>
      </div>
    </transition>
  </div>
</div>


</main>
<!-- 页脚 -->
<footer>
        <div class="copyright">
            <p>© 2023 探索世界旅游网 版权所有</p>
        </div>
</footer>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        scenics: [],
        filteredScenics: [],
        currentScenic: null,
        tickets: [],
        dots: [], // 新增：景点列表
        loadingTickets: false,
        loadingDots: false, // 新增：景点加载状态
        showDetail: false,
        filter: {
          level: '',
          themecode: ''
        }
      };
    },
    mounted() {
      // 检查URL参数，如果存在scenicId则直接显示详情
      const urlParams = new URLSearchParams(window.location.search);
      const scenicId = urlParams.get('scenicId');
      
      if (scenicId) {
        // 如果存在scenicId参数，直接显示景区详情
        this.viewDetail(scenicId);
      } else {
        // 否则显示景区列表
        this.fetchScenicList();
      }
    },
    methods: {
      // 获取景区列表数据
      fetchScenicList() {
        axios.get('/scenic/frontQueryAll')
                .then(response => {
                  if (response.data.code === 200) {
                    this.scenics = response.data.data;
                    this.filteredScenics = this.scenics;
                  } else {
                    this.$message.error(response.data.msg || '获取景区列表失败');
                  }
                })
                .catch(error => {
                  this.$message.error('请求失败: ' + error.message);
                });
      },
      // 查看详情
      viewDetail(scenicId) {
        // 调用查询景区及门票的接口
        axios.get(`/scenic/queryWithTickets?scenicId=${scenicId}`)
                .then(response => {
                  if (response.data.code === 200) {
                    this.currentScenic = response.data.data;
                    // 假设门票信息在scenic.tickets中
                    if (this.currentScenic.tickets) {
                      this.tickets = this.currentScenic.tickets;
                    }
                    this.showDetail = true;
                  } else {
                    this.$message.error(response.data.msg || '获取景区信息失败');
                  }
                })
                .catch(error => {
                  this.$message.error('请求失败: ' + error.message);
                });
      },
      // 返回列表页
      goBack() {
        this.showDetail = false;
        this.currentScenic = null;
        this.tickets = [];
      },
      // 切换筛选条件
      toggleFilter(filterType, value) {
        // 如果点击已选中的选项，则取消选择
        if (this.filter[filterType] === value) {
          this.filter[filterType] = '';
        } else {
          this.filter[filterType] = value;
        }
        this.applyFilter();
      },
      // 应用筛选条件
      applyFilter() {
        this.filteredScenics = this.scenics.filter(scenic => {
          // 级别筛选
          if (this.filter.level && scenic.jbcode !== this.filter.level) {
            return false;
          }

          // 类型筛选 - 使用themecode字段而不是type字段
          if (this.filter.themecode && scenic.themecode !== this.filter.themecode) {
            return false;
          }

          return true;
        });
      },
      // 重置筛选
      resetFilter() {
        this.filter = {
          level: '',
          themecode: ''
        };
        this.filteredScenics = this.scenics;
      },

      // 查看详情：拉景区详情 + 门票 + 景点
      viewDetail(scenicId) {
        this.showDetail = true;
        this.currentScenic = {};
        this.tickets = [];
        this.dots = [];

        // 拉景区基本信息
        axios.get(`/scenic/queryById`, { params: { scenicId } })
                .then(res => {
                  if (res.data && res.data.code === 200) {
                    this.currentScenic = res.data.data || {};
                  } else {
                    this.$message.error((res.data && res.data.msg) || '获取景区信息失败');
                  }
                })
                .catch(err => this.$message.error('请求失败：' + err.message))
                .finally(() => {
                  // 并行拉取门票和景点
                  this.fetchTicketsByScenicId(scenicId);
                  this.fetchDotsByScenicId(scenicId);
                });
      },
// 获取景点列表
      fetchDotsByScenicId(scenicId) {
        this.loadingDots = true;
        axios.get(`/dot/queryByScenicId`, { params: { scenicId } })
                .then(res => {
                  if (res.data && res.data.code === 200) {
                    this.dots = Array.isArray(res.data.data) ? res.data.data : [];
                    // 对数据进行映射处理，确保字段一致性
                    this.dots = this.dots.map(dot => ({
                      ...dot,
                      dcover: dot.dotPic,      // 将 dotPic 映射为 dcover
                      location: dot.dotAddress, // 将 dotAddress 映射为 location
                      description: dot.dotSummary, // 将 dotSummary 映射为 description
                      type: dot.type || "景点",
                      openTime: dot.openTime || "详情请查看",
                      suggestedDuration: dot.suggestedDuration || "1-2小时",
                      ticketPrice: dot.ticketPrice || "详情请查看"
                    }));
                  } else {
                    this.$message.error((res.data && res.data.msg) || '获取景点失败');
                  }
                })
                .catch(err => this.$message.error('请求失败：' + err.message))
                .finally(() => {
                  this.loadingDots = false;
                });
      },

// 查看景点详情（跳转到景点页面）
      viewDotDetail(dotId) {
        window.open(`dot.html?dotId=${dotId}`, '_blank');
      },

// 获取景点类型标签样式
      getDotTypeTag(type) {
        const typeMap = {
          '自然景观': 'success',
          '人文古迹': 'warning',
          '娱乐设施': 'danger',
          '餐饮购物': 'info'
        };
        return typeMap[type] || 'info';
      },
      // 拉门票列表
      fetchTicketsByScenicId(scenicId) {
        this.loadingTickets = true;
        axios.get(`/ticket/queryByScenicId`, { params: { scenicId } })
                .then(res => {
                  if (res.data && res.data.code === 200) {
                    this.tickets = Array.isArray(res.data.data) ? res.data.data : [];
                  } else {
                    this.$message.error((res.data && res.data.msg) || '获取门票失败');
                  }
                })
                .catch(err => this.$message.error('请求失败：' + err.message))
                .finally(() => {
                  this.loadingTickets = false;   // ← 记得收起 loading
                });
      },

      // 预订跳转
      goBooking(scenicId, ticketId) {
        // 未来 booking.html 用 URLSearchParams 解析并下单
        window.location.href = `booking.html?scenicId=${encodeURIComponent(scenicId)}&ticketId=${encodeURIComponent(ticketId)}`;
      },

      // 返回列表
      goBack() {
        this.showDetail = false;
        this.currentScenic = {};
        this.tickets = [];
        this.dots = [];
        // 重新加载景区列表数据
        this.fetchScenicList();
      },

      // 显示层辅助
      fmtMoney(v) {
        if (v === null || v === undefined || v === '') return '0.00';
        return Number(v).toFixed(2);
      },
      mapPayType(ptype) {
        // 若后端返回中文，直接显示即可；若返回编码，可在此映射
        const map = { '1': '景区支付', '2': '网上支付', 1: '景区支付', 2: '网上支付' };
        return map[ptype] || ptype || '网上支付';
      }
    }
  });
  // 检查登录状态并更新导航栏
  function updateAuthButtons() {
    const authButtons = document.getElementById('authButtons');
    const cid = localStorage.getItem('cid');
    const userInfoStr = localStorage.getItem('userInfo');

    if (cid && userInfoStr) {
      // 用户已登录，显示个人中心和退出登录
      try {
        const userInfo = JSON.parse(userInfoStr);
        authButtons.innerHTML = `
                  <span style="margin-right: 15px; color: #4CAF50;">欢迎，${userInfo.visitorsName || userInfo.realName || '用户'}</span>
                  <a href="profile.html" class="btn">个人中心</a>
                  <a href="#" class="btn btn-login" onclick="logout()">退出登录</a>
              `;
      } catch (e) {
        // 解析用户信息失败，显示默认登录状态
        authButtons.innerHTML = `
                  <a href="login.html" class="btn btn-login">登录</a>
                  <a href="register.html" class="btn">注册</a>
              `;
      }
    } else {
      // 用户未登录，显示登录注册按钮
      authButtons.innerHTML = `
              <a href="login.html" class="btn btn-login">登录</a>
              <a href="register.html" class="btn">注册</a>
          `;
    }
  }

  // 通用的退出登录函数（用于导航栏）
  function logout() {
    if (confirm('确定要退出登录吗？')) {
      // 清除本地存储的用户信息
      localStorage.removeItem('cid');
      localStorage.removeItem('userInfo');
      localStorage.removeItem('token');

      // 更新导航栏显示
      updateAuthButtons();

      // 延迟跳转到首页
      setTimeout(() => {
        window.location.href = 'index.html';
      }, 500);
    }
    return false; // 阻止链接默认行为
  }

  // 页面加载时更新导航栏状态
  document.addEventListener('DOMContentLoaded', function() {
    updateAuthButtons();
  });
</script>
</body>
</html>